<template>
    <div class="community">
        <div class="head">
            <div class="head-title">
                <div></div>
                <div>服务</div>
                <div class="service-icon"></div>
            </div>

            <div v-if="!isLogin" class="head-login">
                <div>登陆后可开启服务</div>
                <div class="head-login-btn" @click="goLogin">立即登陆</div>
            </div>
            <div v-else class="head-login">
                <div>您还没有预定服务</div>
                <div class="head-login-btn">立即预定</div>
            </div>
        </div>

        <div>
            <div class="what-have" v-for="(item, index) in notService.statelessResps" :key="index">
                <img class="have-img" :src="item.image">
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { getNotService } from '@/api/api'
import { useRouter } from 'vue-router'
import type { statelessRespsType } from '@/tsList/homeFunts'
//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useAdmin } from "@/stores/counter"

//使用pinia
const store = useAdmin()  //使用公开的方法
let { userData } = storeToRefs(store)  //拿到方法里定义的值

const isLogin = ref(false)
const userLogin = reactive({
    token: ''
})

let router = useRouter();

const notService = reactive<{ statelessResps: Array<statelessRespsType> }>({
    statelessResps: [
    ]
})

function goLogin() {
    router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path: '/LoginView',
    })
}


onMounted(() => {
    // let lastname = JSON.parse(localStorage.userInfo);
    if (localStorage.getItem("userInfo")) {
        let tokenvalue = localStorage.getItem("userInfo")
        let lastname = eval("("+tokenvalue+")");
        isLogin.value = true
        userLogin.token = lastname.token
    }

    getNotService().then((res) => {
        console.log('服务未登录的数据', res);

        notService.statelessResps = res.data.statelessResps
    })
})

</script>

<style lang="less" scoped>
.community {
    padding: 0 10px 80px;
    background-image: linear-gradient(#e6eeff, #e1eaff);

    .head {
        height: 200px;
        background-color: orange;
        background-image: url('@/assets/background/D4.png');
        background-size: cover;

        .head-title {
            display: flex;
            justify-content: space-between;
            padding: 10px 5px;
            font-size: 15px;
            font-weight: 600;

            .service-icon {
                width: 20px;
                height: 20px;
                background-image: url('@/assets/icon/fr1.png');
                background-size: cover;
            }
        }

        .head-login {
            width: 100%;
            height: 135px;
            margin-top: 10px;
            border-radius: 10px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 15px;
            font-weight: 600;

            .head-login-btn {
                font-size: 12px;
                color: white;
                padding: 7px 30px;
                margin-top: 10px;
                border-radius: 3px;
                font-weight: 400;
                background-color: #5b6cd4;
            }
        }
    }

    .what-have {
        .have-img {
            width: 100%;
        }
    }
}
</style>